<template>
    <div class="previewReport">
        <!-- 简报预览区 -->
        <div id="pdfDom">
            <div class="report-header">
                <h1 style="color: #f00">{{ reportInfo.template.headerBig }}</h1>
                <p>第{{ reportInfo.template.reportCode }}次</p>
                <div class="headerLine">
                    <span>{{ reportInfo.template.reportUnit }}</span>
                    <span>{{ reportInfo.template.reportTime }}</span>
                </div>
            </div>
            <div class="report-content">
                <h2>{{ reportInfo.fireBase.fireCode }}号火情点简报</h2>
                <div class="content-first">
                    <h3>一、火情监测信息</h3>
                    <div class="firstItem">
                        <span>时间：</span>
                        <div>
                            <p>{{ reportInfo.fireBase.time }}</p>
                        </div>
                    </div>
                    <div class="firstItem">
                        <span>地点：</span>
                        <div>
                            <p>{{ reportInfo.fireBase.place }}</p>
                            <p>
                                坐标：{{ reportInfo.fireBase.lon }}°E,&nbsp;{{
                                    reportInfo.fireBase.lat
                                }}°N
                            </p>
                            <p>距离：{{ reportInfo.fireBase.distance }}</p>
                            <p>方位角：{{ reportInfo.fireBase.direction }}</p>
                        </div>
                    </div>
                    <div class="firstItem">
                        <span>高程：</span>
                        <div>
                            <p>{{ reportInfo.fireBase.height }}</p>
                        </div>
                    </div>
                    <!-- <div class="firstItem">
                        <span>热点数：</span>
                        <div>
                            <p>{{ reportInfo.fireBase.hotNum }}</p>
                        </div>
                    </div> -->
                    <div class="firstItem">
                        <span>植被分布：</span>
                        <div>
                            <p>{{ reportInfo.fireBase.veg }}</p>
                        </div>
                    </div>
                </div>
                <div class="content-second">
                    <h3>二、火情复核信息</h3>
                    <div class="secondItem">
                        <span>复核情况：</span>
                        <div>
                            <p>{{ reportInfo.checkRes.words }}</p>
                        </div>
                    </div>
                    <div class="secondItem">
                        <span>伤亡情况：</span>
                        <div>
                            <span
                                >死亡：{{
                                    reportInfo.checkRes.death
                                        ? reportInfo.checkRes.death + "人,"
                                        : "不明,"
                                }}</span
                            >
                            <span
                                >受伤：{{
                                    reportInfo.checkRes.hurt
                                        ? reportInfo.checkRes.hurt + "人,"
                                        : "不明,"
                                }}</span
                            >
                            <span
                                >失踪：{{
                                    reportInfo.checkRes.miss
                                        ? reportInfo.checkRes.miss + "人,"
                                        : "不明,"
                                }}</span
                            >
                        </div>
                    </div>
                </div>
                <div class="content-third">
                    <h3>三、作战辅助信息</h3>
                    <div
                        class="thirdItem"
                        v-for="(itemOne, indexOne) of reportInfo.poiList"
                        :key="indexOne"
                    >
                        <h4>
                            （{{ daxie[indexOne] }}）周边{{ itemOne.group
                            }}<span v-show="itemOne.children.length === 0"
                                >无</span
                            >
                        </h4>
                        <div
                            class="tableBox"
                            v-for="(itemTwo, indexTwo) of itemOne.children"
                            :key="indexTwo"
                        >
                            <h5>
                                表{{ indexOne + 1 }}-{{
                                    indexTwo + 1
                                }}
                                事发地方圆{{ radius }}公里内{{
                                    itemTwo.type
                                }}情况表
                            </h5>
                            <el-table class="elTable" :data="itemTwo.dataList">
                                <el-table-column
                                    v-for="(
                                        itemTheader, indexTheader
                                    ) of itemTwo.therader"
                                    :key="indexTheader"
                                    :prop="itemTheader.prop"
                                    :label="itemTheader.label"
                                >
                                </el-table-column>
                            </el-table>
                            <p>
                                注：本表为方圆{{
                                    radius
                                }}公里内前10位距事发点距离最短的{{
                                    itemTwo.type
                                }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="content-forth" v-if="reportInfo.imgUrl">
                    <h3>四、火情地图</h3>
                    <img :src="reportInfo.imgUrl" alt="" />
                    <p>图1-1 事发地遥感卫星影像图</p>
                </div>
            </div>
            <div class="report-footer">
                <div class="footerLine">
                    <span>编辑：{{ reportInfo.template.reporter }}</span>
                    <span>联系方式：{{ reportInfo.template.phone }}</span>
                </div>
            </div>
        </div>
        <div class="funcBtn">
            <p
                @click="getPdf()"
                :style="{ cursor: countDown > 0 ? 'not-allowed' : 'pointer' }"
            >
                <img
                    class="mouseout"
                    src="/images/fireReport/icon/xiazai.png"
                    alt=""
                />
                <img
                    class="mousein"
                    src="/images/fireReport/icon/xiazai2.png"
                    alt=""
                />下载<span v-show="countDown > 0">({{ countDown }})</span>
            </p>
            <p @click="closePreview(false)">
                <img
                    class="mouseout"
                    src="/images/fireReport/icon/close.png"
                    alt=""
                />
                <img
                    class="mousein"
                    src="/images/fireReport/icon/close2.png"
                    alt=""
                />关闭
            </p>
        </div>
    </div>
</template>

<script>
import axios from "axios";
// import html2Canvas from 'html2canvas'
// import JsPDF from 'jspdf'
export default {
    name: "previewReport",
    data() {
        return {
            daxie: ["一", "二", "三", "四", "五"],
            countDown: 0,
        };
    },
    computed:{
        radius(){
            return this.$store.state.circleRadius
        }
    },
    props: ["reportInfo"],
    mounted() {
        console.log(this.reportInfo);
    },
    methods: {
        // 下载PDF-后端
        getPdf() {
            console.log("下载简报");
            let obj = {};
            obj.angle = this.reportInfo.fireBase.direction;
            obj.distance = this.reportInfo.fireBase.distance;
            obj.fireCode = this.reportInfo.fireBase.fireCode;
            obj.fireId = this.reportInfo.fireId;
            obj.height = this.reportInfo.fireBase.height;
            // obj.hotNum = this.reportInfo.fireBase.hotNum;
            if (
                !this.reportInfo.checkRes.death &&
                !this.reportInfo.checkRes.hurt &&
                !this.reportInfo.checkRes.miss
            ) {
                obj.hurt = "不明";
            } else {
                let death = this.reportInfo.checkRes.death
                    ? this.reportInfo.checkRes.death + "人"
                    : "不明";
                let hurt = this.reportInfo.checkRes.hurt
                    ? this.reportInfo.checkRes.hurt + "人"
                    : "不明";
                let miss = this.reportInfo.checkRes.miss
                    ? this.reportInfo.checkRes.miss + "人"
                    : "不明";
                obj.hurt = `死亡${death}, 受伤${hurt}, 失踪${miss}`;
            }
            obj.lat = this.reportInfo.fireBase.lat;
            obj.lon = this.reportInfo.fireBase.lon;
            obj.phone = this.reportInfo.template.phone;
            obj.place = this.reportInfo.fireBase.place;
            obj.poiRadius = this.radius * 1000;
            obj.reportCode = this.reportInfo.template.reportCode;
            obj.reportDate = this.reportInfo.template.reportTime;
            obj.reportTitle = this.reportInfo.template.headerBig;
            obj.reportUnit = this.reportInfo.template.reportUnit;
            obj.reporter = this.reportInfo.template.reporter;
            // obj.stId = '32';
            obj.stId = this.reportInfo.imgId;
            obj.time = this.reportInfo.fireBase.time;
            obj.veg = this.reportInfo.fireBase.veg;
            obj.words = this.reportInfo.checkRes.words;
            obj.img = this.reportInfo.imgUrl; //传的图片
            axios({
                url: `${window.sjzxUrl}/api/special-report/fire/create`,
                method: "post",
                data: obj,
                responseType: "blob",
            }).then((res) => {
                // window.open(`${window.huoqingApiUrl}/api/special-report/download/${res.data}`, '_blank');
                this.download(res.data);
            });
        },
        // 下载文件
        download(data) {
            let url = URL.createObjectURL(
                new Blob([data], {
                    type: "application/vnd.ms-excel;charset=utf-8 ",
                })
            );
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", "海南省森林防火火情简报.docx");
            document.body.appendChild(link);
            link.click();
        },
        // 关闭预览
        closePreview() {
            this.$emit("closePreview", false);
        },
    },
};
</script>

<style lang="stylus">
.previewReport {
    #pdfDom {
        .content-third .thirdItem .tableBox {
            .elTable {
                width: 90%;
                margin: auto;
                border: 0;
                border-left: 1px solid #000;
                border-top: 1px solid #000;
                margin-bottom: 20px;

                th, tr, td {
                    color: #000;
                    border: 0;
                    border-right: 1px solid #000;
                    border-bottom: 1px solid #000;
                    font-size: 16px;
                    font-family: FangSong;
                    color: #000;
                }

                tbody tr:hover>td {
                    background-color: unset !important;
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
#pdfDom >>> div {
    color: #000;
}

.previewReport {
    position: fixed;
    z-index: 9;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    color: #000;
    background: rgba(0,0,0,.8);
    #pdfDom {
        background: #fff;
        width: 65%;
        height: 1000px;
        overflow: auto;
        text-align: left;
        box-sizing: border-box;
        padding: 100px;
        font-family: FangSong;
        line-height: 46px;
        color: #000;
        margin: 0 auto;
        div, p, span {
            color: #000;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        .report-header {
            border-bottom: 2px solid #fe0000;
            text-align: center;
            color: #000;

            h1 {
                font-size: 48px;
                color: #ff0000;
                font-family: SimHei;
            }

            p {
                font-size: 21px;
                line-height: 21px;
                margin: 68px 0 70px;
                color: #000;
            }

            .headerLine {
                font-size: 21px;
                line-height: 45px;
                display: flex;
                justify-content: space-between;
                border-bottom: 5px solid #fe0000;
                margin-bottom: 1px;
            }
        }

        .report-content {
            font-size: 21px;
            color: #000;

            h2, h3, h4, h5 {
                font-weight: 900;
                color: #000;
            }

            h2 {
                font-size: 29px;
                line-height: 29px;
                text-align: center;
                font-family: SimHei;
                margin: 64px 0 69px;
                color: #000;
            }

            h3 {
                font-size: 21px;
                font-family: SimHei;
            }

            h4 {
                font-size: 21px;
                text-indent: 2em;
            }

            h5 {
                font-size: 16px;
                text-align: center;
                line-height: 22px;
            }

            .firstItem, .secondItem {
                display: flex;
                justify-content: flex-start;
                color: #000;

                div {
                    color: #000;

                    p {
                        color: #000;
                    }
                }

                span {
                    text-indent: 2em;
                    white-space: nowrap;
                    font-weight: 900;
                    color: #000;
                }
            }

            .content-third .thirdItem .tableBox {
                color: #000;

                p {
                    font-size: 16px;
                    line-height: 36px;
                    text-indent: 5em;
                    color: #000;
                }
            }

            .content-forth {
                img {
                    width: 1000px;
                    height: auto;
                    margin: auto;
                    display: block;
                }

                p {
                    font-size: 16px;
                    text-align: center;
                    line-height: 50px;
                    color: #000;
                }
            }
        }

        .report-footer {
            padding-top: 1px;
            border-top: 2px solid #fe0000;
            color: #000;

            .footerLine {
                font-size: 21px;
                display: flex;
                justify-content: space-between;
                border-top: 5px solid #fe0000;
            }
        }
    }

    .funcBtn {
        color: #fff;
        padding-top: 5px;
        position: fixed;
        bottom: 50px;
        right: 110px;  
        text-align:center;  
        p {
            float: right;
            margin-left: 20px;
            cursor: pointer;
            width: 102px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            opacity: 1;
            background: #042039;
            border: 1px solid #17d0ff;
            border-radius: 3px;
            color: #17d0ff;

            img {
                width: 18px;
                height: 18px;
                vertical-align: middle;
                margin-right: 8px;
            }

            .mousein {
                display: none;
            }
        }

        p:hover {
            background: #05718c;
            color: #fff;

            .mousein {
                display: inline-block;
            }

            .mouseout {
                display: none;
            }
        }
    }
}
</style>